<template>
    <section>
        <!--高级查询工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表
            v-loading :开启加载效果
            :data ：数据源
        -->
        <el-table :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="sn" label="编号" width="120" sortable>
            </el-table-column>
            <el-table-column prop="name" label="部门名称"  sortable>
            </el-table-column>
            <el-table-column prop="state" label="状态"  :formatter="formatSex" sortable>
            </el-table-column>
            <el-table-column prop="manager.username" label="管理员"  sortable>
            </el-table-column>
            <el-table-column prop="parent.name" label="上级部门" sortable>
            </el-table-column>

            <el-table-column label="操作" >
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页和批量删除工具条-->
        <el-col :span="24" class="toolbar">
            <!--
                :disabled="this.sels.length===0"
                    disabled="true"  or disabled="false"

            -->
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <!--
                :current-page="currentPage"   用来展示当前的页码
            -->
            <el-pagination layout="prev, pager, next"
                           background
                           @current-change="handleCurrentChange"
                           :page-size="pageSize"
                           :total="total"
                           :current-page="currentPage"
                           style="float:right;">
            </el-pagination>
        </el-col>
        <!--
            新增编辑的弹出框
             :visible.sync="dialogFormVisible"  是否显示弹出框
                    dialogFormVisible false 关闭   true:打开
        -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="department">
                <el-form-item label="部门编号" :label-width="formLabelWidth">
                    <el-input v-model="department.sn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="department.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="department.state">
                        <el-radio class="radio" :label="1">启用</el-radio>
                        <el-radio class="radio" :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="管理员" :label-width="formLabelWidth">
                    <!--
                        v-for:vue的循环指令
                            v-for="item in employees"
                                employees：循环的数据源
                                item：遍历以后的数据
                           :label 下拉给用户看的数据
                           :value  发送到后台的数据

                           value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填
                    -->
                    <el-select v-model="department.manager"
                               value-key="id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in employees"
                                :key="item.id"
                                :label="item.username"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitFormData">确 定</el-button>
            </div>
        </el-dialog>


    </section>
</template>

<script>
    export default {
        data(){
            return {
                listLoading:false, //动态的加载效果
                listData:[], //列表数据源
                sels:[],//用户勾选的数据
                total:0,//数据总条数
                pageSize:5,//每页展示的数据的条数
                currentPage:1,//用来记录当前页
                filters: {//做查询框的双向绑定
                    name: ''
                },
                dialogFormVisible:false,//默认状态下关闭弹出框
                department:{//双向绑定的数据模型
                    sn:'',
                    name:'',
                    state:1
                },
                formLabelWidth: '120px',
                title:"新增",
                employees:[] //主要用来循环生成的管理员下拉列表

            }
        },
        methods:{
            //提交数据
            submitFormData(){
                //发送请求
                this.$http.put("/department",this.department).then(res=>{
                    let {success,message}=res.data;
                    if (success){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('网络异常');
                    }
                    //1.关闭弹出框
                    this.dialogFormVisible=false;
                    //2.刷新页面数据
                    this.loadListData();

                })

            },
            //做高级查询的方法
            search(){
                //调用加载数据的方法
               this.loadListData();
            },
            //新增的方法
            handleAdd(){
                //设置显示的title
                this.title="新增";
                //清空表单
                //方式一
                this.department={
                    sn:'',
                    name:'',
                    state:1
                }
                //方式二  使用循环
                //方式三  调用方法
                //this.department = Object.assign({}, {});

                //打开弹出框
                this.dialogFormVisible=true;
            },
            //分页的方法
            handleCurrentChange(val){
                //用户选择的当前的页码
                this.currentPage=val;
                //查询加载页码数据
                this.loadListData();
            },
            //批量删除的方法
            batchRemove() {
                //获取删除数据的id的集合
                var ids = this.sels.map(item => item.id);// [1,2,4,3]

                this.$confirm('确认要删除数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{//确认按钮
                    //发送删除的请求

                    //ex: url /department/2
                    this.$http.patch("/department",ids).then(res=>{
                        //解构表达式
                        let {success,message}=res.data;
                        if (success){//删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {//删除出现异常
                            this.$message.error('网络异常');
                        }
                        //重新加载列表数据
                        this.loadListData();
                    })
                }).catch(()=>{//取消的按钮
                    this.$message('已取消操作');
                })




            },
            //格式化某一列数据
            formatSex: function (row, column) {
                return row.state == 1 ? '启用' : row.state == 0 ? '禁用' : '未知';
            },
            // 当用户勾选数据前面的 选择框触发
            selsChange: function (sels) {
                //就是用户已勾选的数据
                this.sels = sels;
            },
            // index :当前页面的数据的行数 下标
            // row:当前行的数据
            handleDel(index, row) {
                //添加提示框
                this.$confirm('确认要删除数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{//确认按钮
                    //获取数据的id
                    let id = row.id;
                    //发送删除的请求
                    //ex: url /department/2
                    this.$http.delete("/department/"+id).then(res=>{
                        //解构表达式
                        let {success,message}=res.data;
                        if (success){//删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {//删除出现异常
                            this.$message.error('网络异常');
                        }
                        //重新加载列表数据
                        this.loadListData();
                    })
                }).catch(()=>{//取消的按钮
                    this.$message('已取消操作');
                })


            },
            /*
                row：就是当前行的数据
                1.数据的回显
                2.打开弹出框

             */
            handleEdit(index, row) {
                this.title="编辑";
                console.debug(row)
                //数据回显的方式   数据的拷贝
                this.department = Object.assign({}, row);
                /*                console.debug("row",row)
                                console.debug("赋值后的数据",this.department)*/
                console.debug(this.department)
                //打开弹出框
                this.dialogFormVisible=true;
            },
            //提供一个请求后台数据的方法
            loadListData(){
                               //开启加载效果
                this.listLoading=true;
                let param={
                    currentPage:this.currentPage,
                    pageSize:this.pageSize,
                    keywords:this.filters.name
                }

                //发送axios请求
                this.$http.post("/department",param).then(res=>{
                    //数据源进行赋值
                    this.listData=res.data.rows;
                    this.total=res.data.tatal;
                })
                //关闭加载效果
                this.listLoading=false;
            },
            queryEmployees(){//获取所有的员工数据
                this.$http.get("/employee").then(res=>{
                    this.employees=res.data;
                })
            }
        },
        mounted(){
            //请求后台数据 加载数据
            this.loadListData();
            this.queryEmployees();//用于加载数据的下拉列表
        }


    }

</script>

<style scoped>

</style>